<template>
    <div class="user-page">
        <VueVisualEditor v-model="visualData"
                         :option="visualEditorOption"
                         :formData="formData"
                         :customBlockProps="customBlockProps"
        >
            <template #editUsername="{model}">
                <input v-model="formData.username" v-if="formData.food === 'dangao'"/>
                <el-input v-bind="{...model.modelValue}" v-else/>
            </template>
        </VueVisualEditor>
        <div style="text-align: center">
            {{JSON.stringify(formData)}}
        </div>
    </div>
</template>

<script lang="ts">
    import {defineComponent} from 'vue';
    import {VueVisualEditor} from "@/packages/vue-visual-editor";
    import {visualEditorBaseOption} from "@/visual.config";
    import visualData from "./edit-data.json";
    import {ElMessage} from 'element-plus'

    export default defineComponent({
        name: 'App',
        components: {
            VueVisualEditor,
        },
        data() {
            return {
                formData: {
                    username: 'admin',
                    maxLevel: 200,
                    minLevel: 100,
                },
                visualData,
                visualEditorOption: visualEditorBaseOption,
                customBlockProps: {
                    submitButton: {
                        onClick: () => {
                            ElMessage({message: '执行提交表单逻辑'})
                        }
                    },
                    changeField: {
                        onChange: (val: string) => {
                            ElMessage({message: val})
                        }
                    },
                },
            }
        },
    });
</script>

<style lang="scss">
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    #app {
        height: 100%;
        width: 100%;
    }

    .user-page {
        text-align: center;

        & > * {
            text-align: left;
        }
    }
</style>
